﻿<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>淼森商城--商品搜索结果页</title>
    <link rel="icon" href="assets/img/favicon.ico">
    <link href='./css/material.css' rel="stylesheet">
    <link href="./css/vuetify.min.css" rel="stylesheet">
    <script src="./js/vue/vue.js"></script>
    <script src="./js/vue/vuetify.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
    <style type="text/css">
* {
    box-sizing: unset;
}
        .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
            width: 46px;
            height: 23px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 23px;
            font-family: "\5b8b\4f53";
            text-align: center;
            font-size: 16px;
            color: #AAA;
            text-decoration: none;
            out-line: none
        }

        .btn-arrow:hover {
            background-color: #1299ec;
            color: whitesmoke;
        }

        .top-pagination {
            display: block;
            padding: 3px 15px;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            color: #999;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            text-transform: uppercase;
            float: right;
            margin-top: 6px
        }

        .top-pagination span {
            margin-right: 10px;
        }
       .my-brand-image{
           width: 110px;
           height: 47px;
       }
       .logo-list li:hover{
            background-color: #f3f3f3;
        }
        .type-list a:hover{
            color: #1299ec;
        }
        .skus {
            list-style: none;
        }
        .skus li{
            list-style: none;
            display: inline-block;
            float: left;
            margin-left: 2px;
            border: 2px solid #f3f3f3;
        }
        .skus li.selected{
            border: 2px solid #dd1144;
        }
        .skus img{
            width: 25px;
            height: 25px;
        }
    </style>
    <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body >
<!-- 该div对应一个vue实例，所有的页面内容都在 searchApp 容器中，它是一个根标签、根容器 -->
<div id="searchApp">
<div id="nav-bottom">
    <ly-top/>
</div>

<!--list-content-->
<div class="main" >
    <div class="py-container">

        <div class="bread">
            <!--选择过滤项面包屑-->
            <ul class="fl sui-breadcrumb">
                <li><span>全部结果:</span></li>
                <li v-for="(c,i) in breads" :key="i">
                    <a href="#" v-if="i < 2">{{c.name}}</a>
                    <span v-else>{{c.name}}</span>
                </li>
            </ul>
            <!--已选择过滤项-->
            <ul class="tags-choose">
                <li class="tag" v-for="(v,k) in search.filter" v-if="k !== 'cid3'" :key="k">
                    {{k === 'brandId' ? '品牌' : k}}:<span style="color: red">{{getFilterValue(k,v)}}</span></span>
                    <i class="sui-icon icon-tb-close" @click="removeFilter(k)"></i>
                </li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <!--selector -->
        <div class="clearfix selector">
            <!--分类：点击分类后，记录分类后的id-->
            <div class="type-wrap" v-for="(filter,index) in filters" :key="index" v-if="filter.k!='品牌'" v-show="index<5 || show">
                <div class="fl key"><h4>{{filter.k}}：</h4></div>
                <div class="fl value">
                    <ul class="type-list">
                        <li v-for="(op,optionIndex) in filter.options" :key="optionIndex" @click="selectFilter(filter.k, op)">
                            <a>{{op.name}}</a>
                        </li>
                    </ul>
                </div>
                <div class="fl ext"></div>
            </div>

            <!--品牌、规格参数-->
            <div class="type-wrap logo" v-else>
                <div class="fl key brand"><h4>{{filter.k}}：</h4></div>
                <div class="value logos">
                    <ul class="logo-list">
                        <!--点击品牌后，记录品牌的id-->
                        <li v-for="(op,optionIndex) in filter.options" :key="optionIndex" v-if="op.image" @click="selectFilter(filter.k, op)">
                            <img class="my-brand-image" :src="op.image"/>
                        </li>
                        <!--点击规格参数，既要记录聚合名称、也要进行记录规格参数的id、名称-->
                        <li v-else style="text-align: center">
                            <a style="line-height: 30px; font-size: 12px" href="#" @click="selectFilter(filter.k, op)">{{op.name}}</a>
                        </li>
                    </ul>
                </div>
                <!--<div class="fl ext">
                    <a href="javascript:void(0);" class="sui-btn">多选</a>
                </div>-->
            </div>

            <div class="type-wrap" style="text-align: center">
                <v-btn small flat v-show="!show" @click="show=true">
                    更多<v-icon>arrow_drop_down</v-icon>
                </v-btn>
                <v-btn small="" flat v-show="show" @click="show=false">
                    收起<v-icon>arrow_drop_up</v-icon>
                </v-btn>
            </div>
        </div>
        <!--details：中间的详情列表 -->
        <div class="details">
            <div class="sui-navbar">
                <div class="navbar-inner filter">
                    <ul class="sui-nav">
                        <li :class="{active:!search.sortBy}" @click="search.sortBy=''">
                            <a href="#">综合</a>
                        </li>
                        <li @click="search.sortBy='sales'" :class="{active: search.sortBy==='sales'}">
                            <a href="#">销量</a>
                        </li>
                        <li @click="search.sortBy='createTime'" :class="{active: search.sortBy==='createTime'}">
                            <a href="#">新品</a>
                        </li>
                        <li @click="search.sortBy='evaluate'" :class="{active: search.sortBy==='evaluate'}">
                            <a href="#">评价</a>
                        </li>
                        <li @click="search.sortBy='price'; search.descending = !search.descending" :class="{active: search.sortBy==='price'}">
                            <a href="#">
                                价格
                                <span v-show="search.descending">
                                    (降)<v-icon>arrow_drop_down</v-icon>
                                </span>
                                <span v-show="!search.descending">
                                    (升)<v-icon>arrow_drop_up</v-icon>
                                </span>
                            </a>
                        </li>
                    </ul>
                    <div class="top-pagination">
                        <span>共 <i style="color: #222;">{{total}}</i> 商品</span>
                        <span><i style="color: red;">{{search.page}}</i>/{{totalPage}}</span>
                        <a class="btn-arrow" href="#" style="display: inline-block" @click="prev()">&lt;</a>
                        <a class="btn-arrow" href="#" style="display: inline-block" @click="next()">&gt;</a>
                    </div>
                </div>
            </div>

            <!--商品列表-->
            <div class="goods-list">
                <ul class="yui3-g">
                    <!--遍历商品, 遍历的话加上:key，用来提高渲染速度-->
                    <li class="yui3-u-1-5" v-for="(goods,index) in goodsList" :key="index">
                        <div class="list-wrap">
                            <div class="p-img">
                                <!--此处为大图片渲染的动态路径：获取选中相的路径-->
                                <a :href="'item/'+ goods.id +'.html'" target="_blank">
                                    <img :src="goods.selected.image" height="200"/>
                                </a>
                                <ul class="skus">
                                    <!--选中项；鼠标悬浮-->
                                    <li :class="{selected:goods.selected.id==sku.id}" v-for="(sku, skuIndex) in goods.skus" @mouseOver="goods.selected=sku">
                                        <img :src="sku.image">
                                    </li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>{{xxacker.formatPrice(goods.selected.price)}}</i>
                                </strong>
                            </div>
                            <!--标题-->
                            <div class="attr">
                                <em>{{goods.selected.title.length > 20 ? goods.selected.title.substring(0,20) : goods.selected.title}}</em>
                            </div>
                            <!--副标题-->
                            <div class="cu">
                                <em><span>促</span>{{goods.subTitle.length > 17 ? goods.subTitle.substring(0,17) : goods.subTitle}}</em>
                            </div>
                            <!--<div class="commit">
                                <i class="command">已有2000人评价</i>
                            </div>-->
                            <div class="operate">
                                <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!--分页条渲染-->
            <div class="fr">
                <div class="sui-pagination pagination-large">
                    <ul>
                        <!--进行动态属性的判断，如果是第1页，则 “上一页” 是非活性状态，如果是最后一页，则 “下一页” 是非活性状态-->
                        <li class="prev" :class="{disabled: search.page==1}" @click="pre()">
                            <a href="#">«上一页</a>
                        </li>
                        <li class="dotted" v-if="search.page > 3"><span>...</span></li>
                        <li :class="{active:index(i)==search.page}" v-for="i in Math.min(5, totalPage)" @click="search.page=index(i)">
                            <a href="#">{{index(i)}}</a>
                        </li>
                        <li class="dotted" v-if="search.page < totalPage-2"><span>...</span></li>
                        <li class="next" :class="{disabled: search.page==totalPage}" @click="next()">
                            <a href="#">下一页»</a>
                        </li>
                    </ul>
                    <div><span>共{{this.totalPage}}页&nbsp;</span><span>
      到第
      <input type="text" class="page-num" v-model="jumpPage">
      页 <button class="page-confirm" @click="jumpPageTo()">确定</button></span></div>
                </div>
            </div>
        </div>
        <!--hotsale-->
        <div class="clearfix hot-sale">
            <h4 class="title">热卖商品</h4>
            <div class="hot-list">
                <ul class="yui3-g">
                    <li class="yui3-u-1-4">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_01.png"/>
                            </div>
                            <div class="attr">
                                <em>Apple苹果iPhone 6s (A1699)</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-4">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_03.png"/>
                            </div>
                            <div class="attr">
                                <em>金属A面，360°翻转，APP下单省300！</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-4">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_04.png"/>
                            </div>
                            <div class="attr">
                                <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4068.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有20人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-4">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_02.png"/>
                            </div>
                            <div class="attr">
                                <em>Apple苹果iPhone 6s (A1699)</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

</div>

<script type="text/javascript">

    var vm = new Vue({
        el: "#searchApp",
        data: {
            xxacker,
            search: {
                key:"",       // 搜索页面的关键字【以后传递到后台的数据模型】
                page: 1,      //创建数据模型用于记录用户的选择的当前页码，
                filter: {},   //用来记录选择的过滤条件，
                descending: false    // 价格排序字段
            },
            goodsList: [],     //定义新的数据模型，接收返回的数据结果集
            total: 0,
            totalPage: 1,
            jumpPage: 1,
            breads: [],
            filters: [],    //渲染过滤条件，默认时数组
            show: false
        },

        //钩子函数
        created(){
            // 通过 location.search 来进行获取请求参数，判断是否有请求参数
            if(!location.search){
                return;
            }
            // 将请求参数字符串格式化为js对象
            const search = xxacker.parse(location.search.substring(1));
            // 初始化page参数，如果地址栏有page参数，获取page参数，并把page转化为int类型
            search.page = parseInt(search.page) || 1;
            search.filter = xxacker.parse(search.filter) || {};
            // 对排序进行初始化，默认为 ""，代表不排序
            search.sortBy = search.sortBy || "";
            // 对排序方式初始化，转为Bool值
            search.descending = search.descending || "";

            // 记录在data的search对象中
            this.search = search;
            // 发起请求，根据条件搜索
            this.loadData();
        },

        /*监听方法，当search发生变化的时候发送请求*/
        watch: {
            search: {
                deep: true,
                /*判断搜索页是否是第一次加载*/
                handler(newVal, oldVal){
                    if (!oldVal||!oldVal.key) {
                        return ;
                    }
                    window.location = "http://www.xaexcellent.com/search.html?" + xxacker.stringify(this.search);
                }
            }
        },
        methods: {
            loadData(){
                console.log(this.search);
                // 原本查询应该发送get请求，但是由于有长度的要求，所以此处使用post请求
                xxacker.http.post("/search/page", this.search).then(resp=>{
                    //将resp中的数据解析处data数据，然后将页面中的数据渲染在页面中间
                    resp.data.items.forEach(goods => {
                        goods.skus = JSON.parse(goods.skus);   //将goods中的skus转化为json对象，然后重新赋值给goods.skus
                        goods.selected = goods.skus[0];        //默认选中第一个skus
                    })
                    this.goodsList = resp.data.items;          //data中包含当前页的记录、总条数、总页数
                    // console.log(this.goodsList);
                    // 获取总页数
                    this.totalPage = resp.data.totalPage;
                    // 获取总条数
                    this.total = resp.data.total;
                    // 初始化商品分类过滤参数
                    if(resp.data.categories.length === 1){
                        // 如果只有 1 个，那么就查询三级商品分类，展示到面包屑
                        xxacker.http.get("/item/category/all/level?id=" + resp.data.categories[0].id)
                            .then(resp => {
                                this.breads = resp.data;
                            })
                    }
                    // 分类添加到过滤集合：filters
                    this.filters.push({
                        k: "分类",
                        options: resp.data.categories
                    });
                    // 品牌添加到过滤集合：filters
                    this.filters.push({
                        k: "品牌",
                        options: resp.data.brands
                    });
                    resp.data.specs.forEach(spec => {
                        // 把字符串数组转化成对象数组{name:option}
                        spec.options = spec.options.map(option => ({name: option}));
                        this.filters.push(spec);
                    });
                    // console.log(resp.data);
                }).catch(()=>{

                });
            },
            //该方法用来定义当前页的页码
            index(i){
                //console.log("totalPage: "+this.totalPage);
                if (this.search.page <= 3 || this.totalPage <= 5) {    //判断当前页的页码是否小于3，总页数是否大于5；如果为true，就返回当前页的页码
                    return i;
                } else if(this.search.page >= this.totalPage - 2) {    //判断最后5页，如果是倒数第3页就显示最后5页的信息
                    return this.totalPage - 5 + i;
                } else {
                    return this.search.page - 3 + i;    //显示中间5页的信息
                }
            },
            pre(){
                if (this.search.page > 1) {
                    this.search.page--;
                }
            },
            next(){
                if (this.search.page < this.totalPage) {
                    this.search.page++;
                }
            },
            jumpPageTo(){
                if (this.jumpPage > 0 && this.jumpPage <= this.totalPage) {
                    this.search.page = this.jumpPage;
                }else{
                    alert("请填写1-" + this.totalPage + "之间的页数");
                }
            },
            /*点击的搜索过滤条件也需要传递到后台，向后台传递的是 search 数据模型*/
            selectFilter(k, o){
                // 定义一个空对象，统一接收过滤条件
                const obj = {};
                // 把已有值copy给obj对象
                Object.assign(obj, this.search.filter);

                if (k == "分类" || k == "品牌"){
                    obj[k] = o.id;
                } else {
                    obj[k] = o.name;
                }
                this.search.filter = obj;
            },
            getFilterValue(k,v){
                // 如果没有过滤参数，跳过展示
                if(!this.filters || this.filters.length === 0){
                    return null;
                }
                let filter = null;
                // 判断是否是品牌
                if(k === 'brandId'){
                    // 返回品牌名称
                    return this.filters.find(f => f.k === 'brandId').options[0].name;
                }
                return v;
            },
            removeFilter(k){
                // 删除过滤项
                this.search.filter[k] = null;
            }
        },
        //引入一个头信息，
        components:{
            lyTop: () => import("./js/pages/top.js")
        }
    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</body >
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4}</div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>


</html>